<!DOCTYPE html>
<html>

<!-- Mirrored from www.zi-han.net/theme/hplus/table_jqgrid.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:02 GMT -->
<!-- 消息模板列表页面  -->

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>消息模板列表</title>

    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="css/timePicker.css" rel="stylesheet">
    <link href="css/newStyle.css" rel="stylesheet">
    <link href="js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">

    <style>
        /* 重写bookstrap样式表 勿删 */
        .form_inputs {
            width: 160px;
            background-color: #ebebeb;
            border: 1px solid #06a3f9;
            border-radius: 20px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            -o-border-radius: 20px;
            -ms-border-radius: 20px;
        }

        .ibox-title {
            padding: 20px;
        }

        .mb30 {
            margin-bottom: 20px;
        }

        /* 重写bookstrap样式表 勿删 */
        .ui-jqdialog {
            height: auto !important;
        }

        .ui-common-table tbody {
            background-color: #eaf5fc !important;
        }

        .modal-dialog {
            margin: 80px auto !important;
        }

        .form-group {
            margin-left: 0px !important;
            margin-right: 0px !important;
        }

        .modal-sm {
            width: 600px;
        }

        .col-sm-3 {
            width: 30%;
        }

        .col-sm-8 {
            width: 70%;
        }

        .form-horizontal .control-label {
            text-align: left;
            padding-top: 5px;
            font-size: 18px;
        }

        @media only screen and (min-width: 100px) and (max-width: 600px) {
            .modal-sm {
                width: 400px;
            }

            .col-sm-3 {
                width: 40%;
            }

            .col-sm-8 {
                width: 60%;
            }

            .scroll_div {
                width: 85%;
            }

            .form-horizontal .control-label {
                text-align: left;
                padding-top: 5px;
                font-size: 14px;
            }

            .dialog_btn {
                font-size: 14px !important;
            }
        }

        @media only screen and (min-width: 650px) {
            .modal-sm {
                width: 600px;
            }
        }

        /*以下是等待状态的通用样式*/
        .wating_big_div {
            position: fixed;
            top: 0px;
            width: 100%;
            height: 100%;
            display: table;
            z-index: 9999;
        }

        .zhezhao {
            opacity: 0.3;
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
        }

        .wating_content_div {
            text-align: center;
            background: none;
            display: table-cell;
            vertical-align: middle;
        }

        /*以上是等待状态的通用样式*/
        .inputcherckStyle {
            width: 18px;
            height: 18px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background: url("")
        }

        .inputcherckStyle:hover {
            background: url("")
        }

        .inputcherckStyle:checked {
            background: url("")
        }

        #timebox {
            width: 50%;
            height: 100%;
            /* display: flex;
        align-items: center; */
        }

        #timebox>span {
            width: 4.16%;
            display: block;
            float: left;
        }

        .title_choose {
            padding: 5px 10px;
            font-size: 14px;
            margin-right: 10px;
            margin-top: 8px;
            margin-bottom: 5px;
            border: 1px solid #ccc;
            text-align: center;
            cursor: pointer;
        }

        .nonetext {
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: none;
        }

        /* 物流 */
        .logistics_content {
            text-align: center;
            min-height: 200px;
        }

        .logistics_li {
            position: relative;
            padding: 0px 0 20px 25px;
            line-height: 18px;
            border-left: 1px solid #A6ABAF;
            color: #999;
        }

        .logistics_li .logistics_icona {
            display: block;
            position: absolute;
            left: -7px;
            top: 0;
            width: 15px;
            height: 15px;
            z-index: 9;
        }

        .logistics_li .logistics_iconb {
            display: block;
            position: absolute;
            left: -5px;
            top: 0;
            width: 10px;
            height: 10px;
            z-index: 9;
        }

        .logistics_text {
            color: #999999;
            font-size: 12px;
            text-align: left;
            margin-bottom: 10px;
        }

        .logistics_time {
            color: #CCCCCC;
            font-size: 12px;
            text-align: left;
        }

        .input_height {
            height: 34px;
            border: 1px solid #ccc;
        }

        .form-horizontal .control-label {
            font-size: 16px !important;
        }

        .layer-date {
            height: 35px !important;
            width: 150px !important;
        }

        body {
            padding-right: 0px !important;
            /* 强制设置右侧填充为0，这样弹窗的代码就改不动它了 */
            overflow-y: scroll !important;
            /* 所有页面都显示滚动条 */
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox ">

                    <div class="ibox-title pull-left w100p" style="padding: 10px 20px;">
                        <div class="pull-left">
                            <div class="ibox-tools cache5">
                                发送列表
                            </div>
                        </div>

                        <div class="pull-right">
                            <button class="refresh_btn">
                                <a class="refresh_a">
                                    <i class="fa fa-refresh"></i> 刷新
                                </a>
                            </button>
                        </div>
                    </div>


                    <div class="ibox-content pull-left w100p jqGrid_wrapper" id="uploadedWrap" data-gridtype="0"
                        style="padding-top: 0px;">
                        <div class="w100p chaxunBorder">
                            <div class="ibox-title w100p"
                                style="height:50px;background-color: rgb(243, 243, 243);padding: 10px 20px;border-top:0px;">
                                <div class="ibox-tools pull-left">
                                    <span class="titleFindIcon pull-left"></span>
                                    <span class="pull-left" style="position: relative;top: 3px;left: 5px;">筛选条件</span>
                                </div>
                                <div class="pull-right">
                                    <button class="opera_btn" id="check_btn">查询</button>
                                </div>
                            </div>
                            <!-- 搜索条件 -->
                            <div class="w100p p20" style="display: flex;">
                                <div class="ml30">
                                    <span class="f14 pull-left h30 lh30">发送时间：</span>
                                    <div class="pull-left">
                                        <input type="text" class="form-control layer-date h30 ml10 send_time"
                                            placeholder="请选择时间" name="createTime"
                                            onclick="laydate({istime: true, format: 'YYYY-MM-DD'})" required=""
                                            aria-required="true">
                                    </div>
                                </div>


                                <div class="ml30">
                                    <span class="f14 pull-left h30 lh30">用户类型：</span>
                                    <div class="pull-left" style="margin-left: 10px;">
                                        <select id="check_arg3_input" name="" class="user_Select"
                                            style="width: 150px;height:35px; border: 1px solid #e5e6e7;">
                                            <option value="">请选择用户</option>
                                            <option value="1">普通用户</option>
                                            <option value="2">保购员</option>
                                            <option value="3">线上商城</option>
                                            <option value="4">技术服务商</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="ibox-title pull-left w100p table-head"
                            style="background-color: rgb(243, 243, 243);padding: 10px 20px;border-top:0px;">
                            <div class="pull-left">
                                <div class="ibox-tools" style="">
                                    <span class="titleFontIcon"></span>
                                    <span class="pull-left" style="position: relative;top: 3px;left: 5px;">数据列表</span>
                                </div>
                            </div>
                        </div>
                        <!-- 列表标题 -->
                        <div class="pull-left w100p">
                            <table class="table table-bordered mb0 ">
                                <thead>
                                    <tr>
                                        <th><input name="Fruit" class="w20 h20 header_checkbox" type="checkbox"
                                                value="" /></th>
                                        <th>消息标题</th>
                                        <th>消息备注</th>
                                        <th>发送时间</th>
                                        <th>用户类型</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody_list1"></tbody>
                            </table>
                            <div class="nonetext">暂无数据</div>
                        </div>
                        <div class="pull-left tac c0 f14 w100p pre mt10" id="footer_page_div">
                            <div class="">
                                <div class="pull-left">
                                    <div class="ibox-tools">
                                        <a class="refresh_a">
                                            <i class="fa fa-refresh"></i> 刷新
                                        </a>
                                    </div>
                                </div>
                                <!-- 操作分页 -->
                                <span class="under_line cursor_pointer f_last_span">上一页</span>
                                <span class="pl20 f_page_span">1</span>
                                <span class="pl20 under_line cursor_pointer f_next_span">下一页</span>
                                <span class="pl20">共 <span class="f_count_page_span">1</span> 页</span>
                                <div class="disib ml20">
                                    每页显示：
                                    <select class="p0 disib f_page_select">
                                        <option value="" selected="selected">10</option>
                                        <option value="">20</option>
                                        <option value="">30</option>
                                    </select>
                                    条
                                </div>
                            </div>
                            <div class="record_right_div">

                                数据库总数量： <span class="f_counts_span">0</span> 条
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- 点击详情的弹窗 -->
    <div class="modal inmodal fade" id="detail_dialog" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content br8">
                <div class="modal-header p10 bdno">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <span class="modal-title f18">详情</span>
                </div>
                <div class="modal-body bg_f p0">
                    <div class="ibox-content p30">
                        <form class="form-horizontal m-t" id="edit_form" method="post">
                            <!-- <input type="hidden" class="edit_id" name="id" value="1" />
                            <input type="hidden" class="edit_type" name="type" value="1" /> -->
                            <div class="form-group ">
                                <label class="col-sm-3 control-label pull-left">消息标题:</label>
                                <div class="col-sm-8 pull-left">
                                    <p type="text" class="form-control message1" name="cateName" style="height: 30px;">
                                    </p>
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="col-sm-3 control-label pull-left">消息内容:</label>
                                <div class="col-sm-8 pull-left">
                                    <p type="text" class="form-control message2" name="cateName" style="height: 60px;">
                                    </p>
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="col-sm-3 control-label pull-left">消息链接:</label>
                                <div class="col-sm-8 pull-left">
                                    <p type="text" class="form-control message3" name="cateName" style="height: 30px;">
                                    </p>
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="col-sm-3 control-label pull-left">发送用户:</label>
                                <div class="col-sm-8 pull-left">
                                    <p type="text" class="form-control message4" name="cateName" style="height: 30px;">
                                    </p>
                                </div>
                            </div>

                            <div class="form-group ">
                                <label class="col-sm-3 control-label pull-left">发送时间:</label>
                                <div class="col-sm-8 pull-left">
                                    <p type="text" class="form-control message5" name="cateName" style="height: 30px;">
                                    </p>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer bdno tac pt0040">
                    <button type="button" class=" btn-white clear_btn_style dialog_btn" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>




    <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/plugins/peity/jquery.peity.min.js"></script>
    <script src="js/content.min.js?v=1.0.0"></script>
    <script src="js/plugins/layer/laydate/laydate.js"></script>
    <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="js/plugins/iCheck/icheck.min.js"></script>
    <script src="js/plugins/fancybox/jquery.fancybox.js"></script>
    <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-timepicker.js" type="text/javascript" charset="utf-8"></script>
    <!--ajax上传插件:jquery.form ajaxSubmit-->
    <script src="js/jquery-form.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['layedit', 'laydate'],
            function () {
                var table = layui.table,
                    layer = layui.layer,
                    layedit = layui.layedit,
                    laydate = layui.laydate;
                laydate.render({
                    elem: '#chooseTim',//搜索时间框
                    type: 'datetime'
                });
                laydate.render({
                    elem: '#chooseTim1',//搜索时间框
                    type: 'datetime'
                });
            });

        var tableTimeout, addTimeout, setPowerTime, editManageTimeout, deleteTimeOut, getPowerTime,
            limits = 10,
            page = 1,
            counts = 0,
            table_title, roleID;
        var cherk_roleId;

        var totalPages = 0;
        var maxIndex;
        var userMessage;
        var user_type, sendTime  //列表接口

        $(document).ready(function () {
            IsTokenSave();
            userMessage = JSON.parse(sessionStorage.getItem("user_message"));

            $(".refresh_a").click(function () { //刷新按钮
                location.reload();
            });
            InitTbodyList(page);  //初始化列表数据

            //分页部分的操作
            $(".f_page_select").change(function () { //选择一页多少条数据的select
                page = 1; //重置页数
                $(".f_page_span").html(1); //重置页数
                limits = $(".f_page_select option:selected").text(); //设置当前显示数量
                InitTbodyList(page);
            });

            $(".f_last_span").click(function () { //上一页
                if (page < 2) {
                    TipsAlert("这是最前面的数据了");
                    return false;
                }
                page--;
                $(".f_page_span").html(parseInt($(".f_page_span").html()) - 1);
                InitTbodyList(page);
            });
            $(".f_next_span").click(function () { //下一页

                if (page > maxIndex - 1) {
                    TipsAlert("这是最后面的数据了");
                    return false;
                }
                page++;
                $(".f_page_span").html(parseInt($(".f_page_span").html()) + 1);
                InitTbodyList(page);
            });


            // 全选  取消全选
            $(".header_checkbox").change(function () {
                var thisStatus = $(".header_checkbox").is(':checked');
                // console.log(thisStatus)
                if (thisStatus) {
                    $("#tbody_list1 input").prop('checked', true)
                } else {
                    $("#tbody_list1 input").removeAttr("checked");
                }
            });
            //单选框操作
            $("#tbody_list1").on('change', '.td_checkbox', function () {
                var $subs = $("#tbody_list1 input");
                $(".header_checkbox").prop("checked", $subs.length == $subs.filter(":checked").length ? true : false);
            });
        })

        // 点击查询按钮
        $("#check_btn").click(function () {   //查询按钮
            user_type = Number($('.user_Select').val());
            sendTime = $('.send_time').val()
            page = 1; //重置页数
            $(".f_page_span").html(1); //重置页数
            $("#tbody_list1").html('');
            $(".nonetext").hide();
            InitTbodyList(page); //获取列表数据
        });

        /**
         * 该方法用于初始化列表
         * @param {Number} startIndex startIndex是数据起始下标
         * */
        Showload();
        function InitTbodyList(startIndex) {
            tableTimeout = setInterval("Timeout(tableTimeout)", 1000);
            var tableHtml = "";
            $.ajax({
                type: "get",
                url: urls + 'sysNewsPush/newPushPage',
                async: true,
                timeout: 30000,
                dataType: "json",
                headers: {
                    'X-Access-Token': userMessage.token,
                },
                data: {
                    page: startIndex,
                    limit: limits,
                    userType: user_type,
                    sendTime: sendTime
                },
                success: function (res) {
                    CheckLogout(res); //检查是否登陆过期
                    if (res.code == 0) {
                        InitTime();
                        totalPages = res.data.records.total;
                        var myData = res.data.records;
                        counts = res.data.total;
                        if (counts == 0) { //显示或隐藏分页
                            $("#footer_page_div").hide();
                            $(".nonetext").show();
                            InitTime(tableTimeout);
                            return
                        } else {
                            $("#footer_page_div").show();
                        }
                        maxIndex = (counts / limits).toCeil(0);
                        $(".f_count_page_span").html(maxIndex); //设置当前共几页  
                        $(".f_counts_span").html(counts);
                        for (var i = 0; i < myData.length; i++) {
                            // 发送的用户类型 
                            var userType = '';
                            if (myData[i].user_type_common == 1) {
                                userType = '普通用户';
                            }
                            if (myData[i].user_type_sale == 1) {
                               if(userType == ''){
                                userType = userType + '保购员';
                               }else{
                                userType = userType + '，保购员';
                               }
                            }
                            if (myData[i].user_type_store == 1) {
                                if(userType == ''){
                                userType = userType + '线上商城';
                               }else{
                                userType = userType + '，线上商城';
                               }
                            }
                            if (myData[i].user_type_server == 1) {
                                if(userType == ''){
                                userType = userType + '技术服务商';
                               }else{
                                userType = userType + '，技术服务商';
                               }
                            }
                            tableHtml += '<tr>' +
                                '<td data-title="' + myData[i].title + '" data-time="' + myData[i].send_time + '"  data-content="' + myData[i].content + '" data-user="' + userType + '" data-url="' + myData[i].url + '"><input type="checkbox" name=""   class="w20 h20 td_checkbox" value="' + myData[i].title + '" /></td>' +
                                '<td >' + myData[i]["title"] + '</td>' +
                                '<td >' + myData[i]["remarks"] + '</td>' +
                                '<td>' + myData[i]["send_time"] + '</td>' +
                                '<td>' + userType + '</td>' +
                                '<td>' +
                                '<span class="under_line cursor_pointer detail_span  c_1ABC9C" data-toggle="modal" data-target="#detail_dialog" >查看详情</span>' +
                                '</td>' +
                                '</tr>';
                        }
                        $("#tbody_list1").html(tableHtml);
                        DealTable();
                        InitFunc();
                    } else {
                        TipsAlert(res.msg);
                    }
                   
                },
                error: function (xml, text, errorThrown) {
                    if (text == "timeout") {
                        TipsAlert("请求超时,请检查网络或着重新打开该页面.");
                    } else {
                        TipsAlert("请求数据失败,请联系后台技术人员");
                    }
                    InitTime();
                }
            });
        }
        /**
         * 该方法用于初始化操作列里的事件
         * */
        function InitFunc() {
            $(".detail_span").each(function () { //发送列表详情
                $(this).click(function () {
                    var dataset = $(this).parents("td").siblings("td").eq(0)[0].dataset;
                    // console.log(dataset)
                    $('.message1').text(dataset.title)
                    $('.message2').text(dataset.content)
                    $('.message3').text(dataset.url)
                    $('.message4').text(dataset.user)
                    $('.message5').text(dataset.time)
                });
            });
        }
    </script>
</body>
</html>